<template>
  <div>
<el-container class="header">
  <el-header height="70px">
        <router-link to="/">行走书店管理系统</router-link>
<el-dropdown :hide-on-click="false">
        <div class="user-info">
            <img :src="picturePath" alt="">
            <span>{{userName}}</span>
        </div>
<el-dropdown-menu slot="dropdown" >
    <el-button style="border:none;width:100%;height:100%;" @click="logout">登出</el-button>
  </el-dropdown-menu>
</el-dropdown>
    </el-header>
    <!-- header区域 -->
    
    
    <el-container>
        <!-- 侧边栏区域 -->
        <el-aside width="200px">
             <el-menu
      class="el-menu-vertical-demo"
      router 
      >
      <el-menu-item  v-for="(item,index) in menuList" :index="'/'+item.menuPath" :key="index" >
       
        <span slot="title">{{item.menuName}}</span>
      </el-menu-item>
      
    </el-menu>
        </el-aside>
        <!-- 主要内容区域 -->
        <el-main style="margin:10px 0">
            <router-view></router-view>
        </el-main>
    </el-container>
</el-container>
  </div>
</template>

<script>
import req from "@/api/home.js";
export default {
  created(){
this.getUser()

  },
  data() {
    return {
      Role:'',
      picturePath:'',
      userName:'',
menuList: [
        // {title: '用户管理', index: '1',path:'user-manage'},
        // {title: '菜单管理', index: '2',path:'menu-manage'},
        // {title: '商品管理', index: '3',path:'comm-manage'},
        // {title: '首页轮播图管理', index: '4',path:'home-pic-manage'},
        // {title: '商品分类管理', index: '5',path:'comm-classify-manage'},
        // {title: '客户管理', index: '6',path:'client-manage'},
        // {title: '订单管理', index: '7',path:'order-manage'},
        // {title: '热门位商品管理', index: '8',path:'hot-comm-manage'},
        // {title: '门店信息管理', index: '9',path:'shop-info-manage'},
        // {title: '司机信息管理', index: '10',path:'driver-info-manage'}
      ]
    }
  },
  methods: {
    // 退出
    logout() {
      //   跳转到登陆页
      this.$router.push('/login')
            //   清空token
            window.sessionStorage.clear()
    },
    // 获取用户名
 getUser() {
      req("returnUser", {
        
      }).then(data => {
        // console.log(data);
        // console.log(typeof data.data.role)
        this.userName=data.data.userName
        this.picturePath=data.data.picturePath
        this.Role=data.data.role
        sessionStorage.setItem('role',JSON.stringify(data.data) )
        this.returnMenuByRole()
      });
    },
    // 根据角色获取菜单列表
    returnMenuByRole(){
      req("returnMenuByRole", {
        role:parseInt(this.Role)
      }).then(data => {
        this.menuList=data.data
      });
    }
  },
  components: {}
}
</script>

<style lang="scss" scoped>
.header{
  display: flex;
    flex-direction: column;
}
.el-header{
    background-color: rgb(242,242,242);
    display: flex;
    justify-content: space-between;
    align-items: center;
    .router-link-active{
        font-size: 25px;
        color: #409EFF;
        text-decoration: none;
    }
    .user-info{
        display: flex;
        align-items: center;
        height: 100%;
    }
    img{
        margin-right: 20px;
        width: 54px;
    height: 54px;
    border-radius: 50%;
    }
}
.el-main{
    padding: 6px;
}
.el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .el-dropdown-menu{
    width: 130px;
  }
</style>
